<template>
<view class="overflow-hidden ">
  <view class="flex justify-between py-30 px-32 ss-top text-white">
    <view class="flex items-center">
      <u-icon name="arrow-left" color="#fff" size="14" top="2rpx"></u-icon>
      <view class="text-white text-24" @click="setYear(-1)">上一年</view>
    </view>
    <view>{{year}}年</view>
    <view class="flex items-center">
      <view class="text-white text-24" @click="setYear(1)">下一年</view>
      <u-icon name="arrow-right" color="#fff" size="14" top="2rpx"></u-icon>
    </view>
  </view>
  <view class="px-32 mt-20">
    <view v-for="(item, index) in list" :key="index" class="flex justify-between mb-18 px-16 py-32 bg-white rounded-[8rpx]" @click="openPop(item)">
      <view class="text-28 text-m-333">{{item.name}}</view>
      <u-icon name="arrow-right" color="#666" size="14" top="2rpx"></u-icon>
    </view>
  </view>

  <u-empty
      mode="data"
      marginTop="120"
      v-if="list.length == 0 && !loading"
  >
  </u-empty>

  <u-popup :show="isShowPop" @close="handelClose" round="4" mode="bottom">
    <view>
      <view class="relative flex justify-center py-32">
        <div class="absolute left-0 ml-40 ss-close" @click="isShowPop = false">
          <u-icon name="close" color="#333" size="18" top="2rpx"></u-icon>
        </div>
        <view class="font-bold text-30 text-m-333">验证消息</view>
      </view>
      <view class="flex items-center bg-[#FFEEE1] text-24 text-[#FF7200] p-16">
        为保护薪资信息安全，请输入18位身份证号码进行验证
      </view>

      <view class="px-32">
        <u--form
            labelPosition="top"
            :model="model"
            :rules="rules"
            ref="formRef"
        >
          <u-form-item
              label=""
              labelWidth="0"
              prop="userInfo.code"
              ref="item1"
              class="mb-32"
              :borderBottom="true"
          >
            <view class="w-full">
              <view class="mb-16 text-24 text-m-666"><text class="text-[#DA1E28]">*</text>证件号码</view>
              <view class="flex items-center">
                <u--input
                    v-model="model.userInfo.code"
                    border="none"
                    placeholder="请输入证件号码"
                ></u--input>
              </view>
            </view>
          </u-form-item>
        </u--form>
        <view class="pt-200 pb-30">
          <u-button
            type="primary"
            shape="circle"
            :disabled='!model.userInfo.code'
            @click="submit"
            :customStyle="{
            background: '#FF7200',
            fontSize: '32rpx',
            border: 'none',
            height: '80rpx'

          }"
          ><view class="" @click="submit">确认</view></u-button>
        </view>

<!--        <u-checkbox-group-->
<!--            v-model="checkboxValue"-->
<!--            :size="16"-->
<!--            activeColor="#FF7200"-->
<!--            placement="column"-->
<!--        >-->
<!--          <u-checkbox-->
<!--              :customStyle="{marginBottom: '32rpx'}"-->
<!--              label="一个月后再验证"-->
<!--              labelColor="#666"-->
<!--              name="1"-->
<!--          >-->
<!--          </u-checkbox>-->
<!--        </u-checkbox-group>-->
      </view>

    </view>
  </u-popup>

</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
import {UserApi} from "@/api";
const isShowPop = ref(false)
const formRef = ref()
const year = ref(dayjs().year())
const checkboxValue = ref([])
const list = ref([])
const loading = ref(true)
const id = ref('')
const model = ref({
  userInfo: {
    code: '',
  },
})
const rules = ref({
  'userInfo.code': [
      {
        type: 'string',
        required: true,
        message: '输入错误，请重新输入正确的身份证号码',
        trigger: ['blur', 'change']
      },
      // {
      //   validator: (rule, value, callback) => {
      //     return uni.$u.test.idCard(value)
      //   },
      //   message: '输入错误，请重新输入正确的身份证号码'
      // },
  ],
})

onLoad(() => {
  getQueryUserWageList()
})

const handelClose = () => {
  isShowPop.value = false
}

const submit = () => {
  formRef.value.validate().then(() => {
    uni.navigateTo({
      url: `/pages/member/wagesDetails?id=${id.value}&code=${model.value.userInfo.code}&monthFree=${checkboxValue.value}&type=1`
    })
    handelClose()
  }).catch(() => {
    uni.$u.toast('校验失败')
  })
}

const openPop = (item: any) => {
  id.value = item.id
  isShowPop.value = true
}

const getQueryUserWageList = async () => {
  loading.value = true
  const res = await UserApi.queryUserWageList({year: year.value})
  loading.value = false
  list.value = res.data
}

const setYear = (num: number) => {
  year.value +=  num
  getQueryUserWageList()
}

</script>


<style scoped lang="scss">
page{background: #F0F0F0}
.ss-close{top: 50%; transform: translateY(-50%)}
.ss-top{background:  linear-gradient(to right, #FF6640, #FF2F37)}
</style>

